<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        width: 500px;
        height: 500px;
        background: wheat;
        margin: auto;
    }

    #con {
        width: 300px;
        height: 40px;
        font-size: 24px;
        margin-left: 10px;
    }

    #save {
        width: 60px;
        height: 40px;
    }

    #but2 {
        width: 100px;
        height: 40px;
    }

    h1 {
        font-weight: normal;
        color: rgb(23, 186, 240);
    }

    span {
        color: red;
        display: none;
    }
    ul li{
        list-style: none;
    }
</style>

<body>
    <div class="box">
        <input type="text" id="con">
        <button id="save">保存</button>
        <button id="but2">清除本地存储</button>
        <h1>任务列表</h1>
        <hr>
        <div id="box">
            <!-- <ul></ul> -->
        </div>
    </div>

</body>
<script>
    window.onload = function () {
        save.onclick = saves
        but2.onclick = del
    }
    function saves() {
        var val = document.getElementById('con').value
        var str = '<li>任务:'+ val +'</li>'
        document.getElementsByName('ul')[0].innerHTML = str
        console.log(str);
        saves(val)
    }
    function saveLocal(val) {
        var lists = localStorage.getItem('lists')
        if (lists == null) {
            localStorage.setItem('lists',JSON.stringify([val]))
        }else{
            lists = JSON.parse(lists)
            lists.unshift(val)
            localStorage.setItem('lists',JSON.stringify([val]))
        }
        showList
    }
    function showList() {
        var lists = JSON.parse(localStorage.getItem('lists'))

        if (lists && lists.length > 0) {
            var str = ''
            for (i in lists) {
                str += '<li>任务' + (+i + 1) + ':' + lists[i] + '<button onclick=del(' + i + ')>×</button>' + '</li>'
            }
            document.getElementsByName('ul')[0].innerHTML = str
        }else{
            document.getElementsByName('ul')[0].innerHTML = '暂无任务'
        }
    }
    function del(index) {
        var lists = JSON.parse(localStorage.getItem('lists'))
        lists.splice(index,1)
        localStorage.setItem('lists',JSON.stringify(lists))
        showList()
    }




    // window.onload = function () {
    //     document.getElementById('but1').onclick = function () {
    //         var str = ''
    //         for (let k in int) {
    //             box.innerHTML = `<li>${k}</li>`
    //         }
    //     }
    // }



    // window.onload = function () {
    //     var content = document.getElementById('int').value
    //     document.getElementById('but1').onclick = function () {
    //         var ing = int.value
    //         for (let i = 0; i < 10; i++) {
    //             box.innerHTML = `<span>任务：</span>` + ing
    //         }
    //         localStorage.setItem('content',content)
    //     }
    //     document.getElementById('but2').onclick = function () {
    //         localStorage.clear()
    //     }
    // }

</script>
</html>